<template>
  <div class="right">
    <div class="right-box">
      <div class="title">微信扫码登录</div>
      <div class="image">
        <img src="../../assets/image/showqrcode.jpg" alt="" srcset="" />
      </div>
      <div class="login-info">
        请使用<span>微信</span>扫描二维码 <br />
        安全登录登录,防止被盗
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.right {
  box-sizing: border-box;
  width: 300px;
  transition: width 0.8s;
  overflow: hidden;
  // 强转不换行 不被挤压
  white-space: nowrap;

  .right-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-left: 1px #ccc solid;
    height: 100%;

    .title {
      font-size: 20px;
      font-weight: 700;
    }

    .image {
      border: 1px #ccc solid;

      img {
        margin: auto;
        width: 140px;
        height: 140px;
      }
    }

    .login-info {
      font-size: 14px;
      font-weight: 400;
      color: #ccc;

      span {
        color: $main-color;
      }
    }
  }
}
</style>
